<template>
  <div>
    <van-form validate-first @submit="submit">
      <van-image
        width="4rem"
        height="4rem"
        src="https://ftp.bmp.ovh/imgs/2021/06/3a0bdfba0a66b12e.jpg"
      />
      <h2>欢迎来到注册页面</h2>
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        v-model="username"
        name="username"
        placeholder="请输入你的手机号"
        :rules="[{ pattern , message: '手机号格式不正确' }]"
      />
      <van-field
        v-model="password"
        name="password"
        placeholder="请输入你的手机号"
        :rules="[{ validator , message: '请输入8-12个字母.数字.特殊字符（!@#$%^&*）' }]"
      />
      <div style="margin: 16px;width: 100%">
        <van-button round block type="info" native-type="submit">注册</van-button>
        <button @click.prevent="login">登录</button>
      </div>
    </van-form>
  </div>
</template>
<script>
import axios from "axios";
import Qs from "qs";
export default {
  props: [],
  data() {
    return {
      username: "",
      password: "",
      pattern: /^1[34578]\d{9}$/
    };
  },
  computed: {},
  methods: {
    validator(val) {
      return /^[a-z0-9\!\@\#\$\%\^\&\*]{8,12}$/i.test(val);
    },
    submit(val) {
      val=Qs.stringify(val);
        axios
          .post(
            "/apia/register.php",val
          )
          .then(res => {
            if (res.data == '用户名已存在') {
              this.$toast.fail("用户名已存在");
            } else {
              this.$toast.success("注册成功");
              this.$router.push("/login");
            }
          })
          .catch(err => {
            console.log(err);
          });
    },
    //跳转登录页面
    login() {
      this.$router.push("/login");
    },
    reg() {}
  },
  components: {},
  filters: {},
  watch: {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {}
};
</script>
<style scoped>
form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem 2rem 0 2rem;
}
button {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  border: none;
  border-radius: 3px;
  background-color: #ff8646;
  color: white;
}
</style>